<template>
    <div class="app-container">
        <el-card class="card-container" style="width: 500px" body-style="padding: 30px 30px 20px">
            <el-row slot="header">提现账户</el-row>
            <div class="left-container">
                <el-image
                    :src="
                        formModel.type === 'WECHAT'
                            ? wechatUrl
                            : formModel.type === 'ALIPAY'
                            ? aliUrl
                            : bankUrl
                    "
                    style="width: 64px; height: 64px"
                    fit="fill"
                >
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>
            <div class="right-container">
                <el-form ref="formRef" :model="formModel" :rules="formRule" inline>
                    <el-row>
                        <el-form-item
                            label-width="80px"
                            :label="
                                formModel.type === 'WECHAT'
                                    ? '微信账户'
                                    : formModel.type === 'ALIPAY'
                                    ? '支付宝账户'
                                    : '银行卡账户'
                            "
                        ></el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="账户信息" prop="account" required label-width="80px">
                            <el-input v-model="formModel.account"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row v-if="formModel.type === 'BANKCARD'">
                        <el-form-item label="开户银行" prop="bankName" required label-width="80px">
                            <el-input v-model="formModel.bankName"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row v-if="formModel.type === 'BANKCARD'">
                        <el-form-item label="开户名" prop="userName" required label-width="80px">
                            <el-input v-model="formModel.userName"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row v-if="formModel.type === 'BANKCARD'">
                        <el-form-item
                            label="开户网点"
                            prop="openingBankBranch"
                            required
                            label-width="80px"
                        >
                            <el-input v-model="formModel.openingBankBranch"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row
                        ><el-form-item label="账户余额" label-width="80px">
                            {{ formModel.withdrawable }}
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="提现金额" label-width="80px">
                            {{ formModel.amount }}
                        </el-form-item>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-form-item>
                            <el-button type="primary" size="small" @click="handleAgreeWithdraw"
                                >同意提现</el-button
                            >
                            <el-button type="danger" size="small" @click="modalVisible = true"
                                >拒绝提现</el-button
                            >
                        </el-form-item>
                    </el-row>
                </el-form>
                <el-dialog :visible.sync="modalVisible" title="拒绝理由" width="350px">
                    <el-form ref="rejectFormRef" :model="rejectFormModel" :rules="rejectFormRule">
                        <el-form-item label="备注" required prop="comment">
                            <el-input v-model="rejectFormModel.comment"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer">
                        <el-button type="primary" size="small" @click="handleRejectWithdraw"
                            >确定</el-button
                        >
                        <el-button type="default" size="small" @click="modalVisible = false"
                            >取消</el-button
                        >
                    </div>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getWithdrawDetail, dealWithWithdraw } from '@/api/captain';
import wechatUrl from '../../../assets/basic/微信.png';
import aliUrl from '../../../assets/basic/支付宝.png';
import bankUrl from '../../../assets/basic/银行卡.png';

export default {
    data() {
        return {
            wechatUrl,
            aliUrl,
            bankUrl,
            formModel: {},
            rejectFormModel: {
                comment: ''
            },
            formRule: {
                account: [{ required: true, trigger: 'blur', message: '请输入账户信息' }],
                bankName: [{ required: true, trigger: 'blur', message: '请输入开户银行' }],
                userName: [{ required: true, trigger: 'blur', message: '请输入开户名' }],
                openingBankBranch: [{ required: true, trigger: 'blur', message: '请输入开户网店' }]
            },
            rejectFormRule: {
                comment: [{ required: true, trigger: 'blur', message: '必须填入备注信息' }]
            },
            modalVisible: false
        };
    },
    created() {
        if (this.$route.params.id) {
            this.getDetail();
        }
    },
    methods: {
        getDetail() {
            getWithdrawDetail(this.$route.params.id).then(res => {
                if (res.data.success) {
                    this.formModel = res.data.data;
                }
            });
        },
        handleAgreeWithdraw() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    this.$confirm('同意?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(msg => {
                            if (msg === 'confirm') {
                                dealWithWithdraw({
                                    withdrawId: this.formModel.id,
                                    status: 'AGREED'
                                })
                                    .then(res => {
                                        if (res.data.success) {
                                            this.$message({
                                                message: '处理成功！',
                                                type: 'info',
                                                duration: 1000
                                            });
                                        } else {
                                            this.$message({
                                                message: res.data.msg,
                                                type: 'error',
                                                duration: 1000
                                            });
                                        }
                                    })
                                    .catch(err => {
                                        this.$message({
                                            message: '处理失败！',
                                            type: 'error',
                                            duration: 1000
                                        });
                                    });
                            }
                        })
                        .catch(() => {});
                } else {
                    this.$message({
                        message: '表单填写错误！',
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleRejectWithdraw() {
            this.$refs.rejectFormRef.validate(valid => {
                if (valid) {
                    dealWithWithdraw({
                        withdrawId: this.formModel.id,
                        status: 'REJECTED',
                        comment: this.rejectFormModel.comment
                    })
                        .then(res => {
                            if (res.data.success) {
                                this.$message({
                                    message: '处理成功！',
                                    type: 'info',
                                    duration: 1000
                                });
                            } else {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'error',
                                    duration: 3000
                                });
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: '处理失败！',
                                type: 'error',
                                duration: 3000
                            });
                        });
                } else {
                    this.$message({
                        message: '表单填写错误！',
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.card-container {
    .left-container,
    .right-container {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
    }
}
</style>
